<div th:fragment="html">
    <div id="gridDiv">
        <table class="inputTable ">
            <input type="text" class="form-control" v-model="gridMap.perGridAmount" style = "display:none">
            <tr>
                <td align="right">
                    <span data-toggle="tooltip" data-placement="top">
                        网格波动率 :
                    </span>
                </td>
                <td>
                    <select class="form-control" @change="queryGrid" v-model="gridMap.gridWidth">
                        <option value="0.03">3%</option>
                        <option value="0.05">5%</option>
                        <option value="0.07">7%</option>
                        <option value="0.1">10%</option>
                    </select>
                </td>
                <td align="right">
                    <span data-toggle="tooltip" data-placement="top">
                        网格建仓金额：
                    </span>
                </td>
                <td>
                    <input type="text" class="form-control" @change="queryGrid" v-model="gridMap.initAmount">
                </td>

                <td align="right">
                    <span data-toggle="tooltip" data-placement="top">
                        建仓买入份数：
                    </span>
                </td>
                <td>
                    <input type="text" class="form-control" @change="queryGrid" v-model="gridMap.initShare">
                </td>
            </tr>
        </table>

        <br>
        <div style="text-align:center;">
            <button type="button" class="btn btn-success" @click="queryGrid">查询</button>
        </div>
        <br>

        <div class="label label-warning">交易统计</div>
        <table class="table table-bordered table-condensed">
            <thead>
            <th align="center" colspan="2">网格投资盈亏统计（1000元投资收益）</th>
            </thead>
            <tbody>
            <tr>
                <td width="50%">总共交易次数</td>
                <td>{{gridStatistics.gridCount}}</td>
            </tr>
            <tr>
                <td>完成的交易次数</td>
                <td>{{gridStatistics.completeCount}}</td>
            </tr>
            <tr>
                <td>完成的收益</td>
                <td>{{gridStatistics.completeProfit|formatNumberFilter(2)}}</td>
            </tr>
            <tr>
                <td>完成的收益率</td>
                <td>{{gridStatistics.completeRate*100|formatNumberFilter(2)}}%</td>
            </tr>
            <tr>
                <td>总收益</td>
                <td>{{gridStatistics.profitCount|formatNumberFilter(2)}}</td>
            </tr>
            <tr>
                <td>总收益率</td>
                <td>{{gridStatistics.rateProfit*100|formatNumberFilter(2)}}%</td>
            </tr>
            <tr>
                <td>年化收益率</td>
                <td>{{gridStatistics.rateAnnual*100|formatNumberFilter(2)}}%</td>
            </tr>
            </tbody>
        </table>

        <div class="label label-warning">交易明细</div>
        <table class="table table-striped table-bordered table-condensed table-hover">
            <thead>
            <th>盈/亏</th>
            <th>购买日期</th>
            <th>购买盘点</th>
            <th>出售日期</th>
            <th>出售盘点</th>
            <th>购买份额</th>
            <th>盈亏比率</th>
            <th>1000元投资收益</th>
            </thead>

            <tbody>
            <tr v-for="bean in gridList">
                <td>
                    <span v-if="bean.sellClosePoint>bean.buyClosePoint" class="label label-danger">盈利</span>
                    <span v-if="bean.sellClosePoint<=bean.buyClosePoint" class="label label-success">亏损</span>
                </td>
                <td>{{bean.buyDate}}</td>
                <td>{{bean.buyClosePoint}}</td>
                <td>{{bean.sellDate}}</td>
                <td>
                    <span v-if="bean.sellClosePoint==0">n/a</span>
                    <span v-if="bean.sellClosePoint!=0">{{bean.sellClosePoint}}</span>
                </td>
                <td>{{1000/bean.buyClosePoint|formatNumberFilter(2)}}</td>
                <td>
                    <span v-if="bean.sellClosePoint==0">n/a</span>
                    <span class="label"
                          v-bind:class="{ 'label-danger' : bean.sellClosePoint>bean.buyClosePoint, 'label-success' : bean.sellClosePoint<=bean.buyClosePoint }"
                          v-if="bean.sellClosePoint!=0">{{(bean.sellClosePoint-bean.buyClosePoint)*100/bean.buyClosePoint | formatNumberFilter(2)}}%</span>
                </td>
                <td>
                    <span v-if="bean.sellClosePoint==0">n/a</span>
                    <span v-if="bean.sellClosePoint!=0">{{bean.rate*1000 | formatMoneyFilter }}</span>
                </td>
            </tr>

            </tbody>

        </table>
    </div>

    <script>
        $(function () {
            var gridVue = {
                gridMap:{fundData:{id:'',code:''},startDate:'',endDate:'',gridWidth:'0.03',initAmount:'5000',initShare:'5',perGridAmount:'1000'},
                gridStatistics:{},
                gridList:[],
            };
            var vue = new Vue({
                el: '#gridDiv',
                data: gridVue,
                mounted: function () {

                },
                methods: {
                    getGrid:function(){
                        vue.gridMap.fundData.id=$("#simSmfdId").val();
                        vue.gridMap.fundData.code=$("#simSmfdCode").val();
                        vue.gridMap.startDate=$("#simSmsd").val();
                        vue.gridMap.endDate=$("#simSmed").val();
                        // vue.gridMap.maVal=$("#simSmmv").val();
                    },
                    queryGrid:function(){
                        vue.getGrid();
                        var url =  "/funddatas/grid";
                        axios.post(url,vue.gridMap).then(function(response) {
                            var result=response.data;
                            if(result.code==0){
                                vue.gridStatistics=result.gridStatistics;
                                vue.gridList=result.gridList;
                            }else {
                                alert(result.msg);
                            }
                        });
                    },
                }
            });
        });
    </script>
</div>